<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-03-30 23:22:24
 * @LastEditTime: 2024-04-02 11:09:22
 * @FilePath: \electron-wallpaper\src\renderer\src\views\home.vue
 * @Description: 
 * 
-->
<script setup>
import { ref } from 'vue'
// 设置壁纸
/**
 * @description: 设置壁纸
 * @param {*} url
 * @return {*}
 */
async function setWallpaperAsync(url) {
  window.api.setWallpaper(url)
  // if (i) setCurrentWallpaperIndex(i)
}

const wallPapers = ref([])
// 获取壁纸列表
async function getWallpaperList() {
  wallPapers.value = await window.api.getWallpaperList()
  // console.log(wallPapers.value, ' wallPapers.value', wallPapers.value.length)
}

getWallpaperList()

let curentWallpaper = ref(0)
function setCurrentWallpaperIndex() {
  curentWallpaper.value < wallPapers.value.length - 1
    ? curentWallpaper.value++
    : (curentWallpaper.value = 0)
}
const MODE = import.meta.env.MODE
</script>

<template>
  <div class="container">
    <!-- <div class="wallpaper-lists">
      <div v-for="(item, index) in wallPapers" :key="index" class="wallpaper-item">
        <img
          class="img"
          :class="curentWallpaper === index ? 'active' : ''"
          :src="MODE === 'development' ? '/@fs/' + item : item"
          alt=""
          @click="setWallpaperAsync(item.split('\\').pop(), index)"
        />
      </div>
    </div> -->
    <img
      class="img no-drag"
      title="点击切换壁纸"
      :src="
        MODE === 'development' ? '/@fs/' + wallPapers[curentWallpaper] : wallPapers[curentWallpaper]
      "
      alt=""
      @click="setCurrentWallpaperIndex"
    />
    <button
      class="set-wallpaper no-drag"
      @click="setWallpaperAsync(wallPapers[curentWallpaper].split('\\').pop())"
    >
      设置壁纸
    </button>
  </div>
</template>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  .wallpaper-lists {
    display: flex;
    flex-wrap: wrap;
    .wallpaper-item {
      &:first-child,
      &:nth-child(6n) {
        padding-left: 10px;
      }
      padding-right: 10px;
      width: 20%;
      display: flex;
      justify-content: center;
    }
  }
  .img {
    cursor: pointer;
    // width: calc(100% - 20px);
    width: 100%;
    max-height: 230px;
    object-fit: cover;
    cursor: pointer;
    margin: auto;
    border-radius: 0 0 2px 2px;
    & .active {
      border: 1px solid blueviolet;
    }
  }
  button.set-wallpaper {
    width: 90%;
    padding: 10px 20px;
    margin: auto;
    margin-top: 10px;
    border-radius: 6px;
    box-shadow: 0px 2px 3px blueviolet;
    border: none;
  }
  .other-seeting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    button {
      &:first-child {
        margin-left: 10px;
      }
      border-radius: 6px;
      width: 40%;
      padding: 10px 20px;
      margin-right: 10px;
      box-shadow: 0px 2px 3px blueviolet;
    }
    button:disabled {
      box-shadow: 0px 2px 3px rgb(176, 135, 159);
    }
  }
}
</style>
